<template>
  <el-aside :width="iscollapse ? '64px' : '200px'">
    <!-- width 宽度不写死,是否进行折叠来计算,动态切换 ,折叠 64 ,不折叠200px -->
    <div class="toggle-button" text-color='#fff' border-right="none" @click="toggleCole" active-text-color="#ffd84b"
      v-if="iscollapse">
      <h3>---</h3>
    </div>
    <div text-color='#fff' border-right="none" @click="toggleCole" class="toggle-button" active-text-color="#ffd84b"
      v-else>
      <h3> ||| </h3>
    </div>
    <!-- 通过判断iscollapse 来显示 -->
    <el-menu background-color="#333744" text-color='#fff' active-text-color="#ffd84b" router :unique-opened="true"
      border-right="none" :collapse="iscollapse" :collapse-transition="false" default-active>

      <el-menu-item index="/board">
        <el-icon>
          <HomeFilled />
        </el-icon>
        <span slot="title" class="myspan" >首页</span>
      </el-menu-item>
     
      <el-menu-item index="/inquiries">
        <el-icon>
          <Document />
        </el-icon>
        <span slot="title">测试用例</span>
      </el-menu-item>


      <el-menu-item index="/devicemanager">
        <el-icon>
          <icon-menu />
        </el-icon>
        <span slot="title">DeviceManager</span>
      </el-menu-item>
 
      

      <el-menu-item index="/app">
        <el-icon>
          <Link />
        </el-icon>
        <span slot="title">接口自动化测试</span>
      </el-menu-item>

      <!-- <el-menu-item index="/web">
        <el-icon>
          <Sort />
        </el-icon>
        <span slot="title">UI </span>
      </el-menu-item> -->

      <el-menu-item index="/operationdev">
        <el-icon>
          <Link />
        </el-icon>
        <span slot="title">运维</span>
      </el-menu-item>

      <!-- <el-sub-menu index="/web">
        <template #title>
          <el-icon>
            <Sort />
          </el-icon>
          <span>Web UI自动化测试</span>
        </template>
        <el-menu-item index="/web/prolist">
          <el-icon><Link /></el-icon>
          <span slot="title">项目列表</span>
        </el-menu-item>

  

        <el-menu-item index="/web/prodetail">
          <el-icon><Link /></el-icon>
          <span slot="title">测试用例详情</span>
        </el-menu-item>

      </el-sub-menu> -->



      <el-menu-item index="/upload">
        <el-icon>
          <share />
        </el-icon>
        <span slot="title">文件上传</span>
      </el-menu-item>

      <!-- <el-menu-item index="/docker">
        <el-icon>
          <Coin />
        </el-icon>
        <span slot="title">Docker 容器</span>
      </el-menu-item> -->


      <!--el-menu-item 是个二级的菜单 -->
      <!-- <el-menu-item index="/dataanalysis">
        <el-icon>
          <DataAnalysis />
        </el-icon>
        <span slot="title">数据分析</span>
      </el-menu-item> -->

      <el-sub-menu index="/management">
        <template #title>
          <el-icon>
            <Avatar />
          </el-icon>
          <span>用户管理</span>
        </template>

        <el-menu-item index="/userinfo">
          <el-icon>
            <User />
          </el-icon>
          <span slot="title">添加用户</span>
        </el-menu-item>
      </el-sub-menu>



      <!--<el-menu-item :index="v.url" v-for="v in items" :key='v.url'>-->
      <!--<el-icon>-->
      <!--<compontent :is="v.flag"></compontent>-->
      <!--</el-icon>-->
      <!--<span>{{ v.name }}</span>-->
      <!--</el-menu-item>-->


    </el-menu>


  </el-aside>
</template>


<script setup>

import { ref, reactive } from 'vue'

import {
  Document, Menu as IconMenu, Share, Apple, Sort, Avatar, User, Link,HomeFilled
} from '@element-plus/icons-vue'

//    可以做一个list展示, icon 后面是图标 ,展示的时间使用 compontent  :is='flag' 来展示
//const items = reactive([
// {name: '爬虫', url: '/spider', flag: Apple},
//  {name: '自动化测试', url: '/autotest', flag: Document},
// {name: '文件管理', url: '/censu', flag: Share},
// {name: '数据分析', url: '/dataanalysis', flag: Share},
// {name: 'docker', url: '/docker', flag: Share}
//])
// export default{
//   data() {
//     return {
//         // 是否折叠,开关 
//          iscollapse : false

//     }
//   },
//   methods:{
//       func (){

//       }

//   }
// }

//定义是否折叠变量 默认是false
const iscollapse = ref(false)
//折叠菜单的展开
function toggleCole() {
  console.log("toggleCole")
  console.log(iscollapse.value)
  iscollapse.value = !iscollapse.value

}


</script>

<style lang="less" scoped>
.el-asi {
  background-color: "#333744"
}
.myspan{
  text-align: center;
  display: flex;
  background-color: "#333744"
}


.toggle-button {
  background-color: "#333744";
  text-align: center;
  height: 20px;
  font-size: 15px;
  line-height: 20px;
  color: '#fff';
  letter-spacing: 0.2em;
  cursor: pointer; //手势
}

// .toggle-button2 {
//   background-color: "#333744";
//   text-align: center;
//   height: 20px;
//   font-size: 15px;
//   line-height: 20px;
//   color: '#fff';
//   letter-spacing: 0.2em;
//   cursor: pointer; //手势

// }
</style>